<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>找回密码</title>
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <!--说明： 分为三个大模块是按照步骤，最开始只显示找回账号DOM，点击下一步后切换到下一个容器，上一个不显示，依次类推 -->
    <div class="title">
        <span class="active"><i>1</i>输入找回账号</span>
        <span><i>2</i>回答密保问题</span>
        <span><i>3</i>重置密码</span>
    </div>
    <div class="box">
        <div class="input-item">
            <label>请输入手机号：</label>
            <input type="text">
        </div>
        <button class="one">下一步</button>
    </div>
    <!----------------------------------------------------->
    <br>
    <hr>
    <div class="title">
        <span><i>1</i>输入找回账号</span>
        <span class="active"><i>2</i>回答密保问题</span>
        <span><i>3</i>重置密码</span>
    </div>
    <div class="box">
        <div class="input-item yhm">
            <label> 用户名：</label>
            <input type="text" value="xxxx" disabled>
        </div>
        <div class="input-item sjh">
            <label> 手机号：</label>
            <input type="text" value="xxxx" disabled>
        </div>
        <div class="input-item mb">
            <label>密保问题：</label>
            <input type="text" value="xxxxxxx" disabled>
        </div>
        <div class="input-item mbda">
            <label>密保答案：</label>
            <input type="text" class="mb1">
        </div>
        <button>上一步</button>
        <button class="two">下一步</button>
    </div>
    <!----------------------------------------------------->
    <br>
    <hr>
    <div class="title">
        <span><i>1</i>输入找回账号</span>
        <span><i>2</i>回答密保问题</span>
        <span class="active"><i>3</i>重置密码</span>
    </div>
    <div class="box">
        <div class="input-item">
            <label>请输入新密码：</label>
            <input type="text" class="new">
        </div>
        <button>上一步</button>
        <button class="three">立即重置</button>
    </div>


</body>

<script>
    const a = document.querySelector('.input-item input')
    document.querySelector('.one').addEventListener('click', function () {
        if (a.value !== '') {
            console.log(132);
            const phone = document.querySelector('.input-item input').value


            const xhr = new XMLHttpRequest()
            xhr.open('GET', `http://124.223.14.236:3001/api/user/findPwd?phone=${phone}`)
            xhr.send()
            xhr.onreadystatechange = () => {
                if (xhr.readyState === 4 && xhr.status === 200) {

                    const zhi = JSON.parse(xhr.responseText)
                    if (zhi.success) {
                        document.querySelector('.two').addEventListener('click', function () {
                            console.log(132);

                        })
                    } else {
                        return alert(zhi.msg)
                    }
                    // console.log(String(zhi.data.id));
                    document.querySelector('.yhm input').value = zhi.data.username
                    document.querySelector('.sjh input').value = zhi.data.phone
                    document.querySelector('.mb input').value = zhi.data.question
                    document.querySelector('.three').addEventListener('click', function () {

                        const answer = document.querySelector('.mb1').value

                        const id = String(zhi.data.id)
                        const password = document.querySelector('.new').value
                        const data = JSON.stringify({
                            answer, id, password

                        })
                        const xhr1 = new XMLHttpRequest()
                        xhr1.open('POSt', 'http://124.223.14.236:3001/api/user/resetPwd')
                        xhr1.setRequestHeader("Content-Type", "application/json");
                        xhr1.send(data)

                    })



                }
            }


        }
    })






</script>

</html>